<html>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css'/>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

<body>
<div style="float: right;">
    <button>重置</button>
    <button>保存</button>
    <button id="code">code</button>
</div>
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

<script>
    $(function () {
        var userId = "";
        while (userId.length == 0) {
            userId = prompt("请输入昵称")
        }

        var autoSave;
        //配置项
        var options = {
            title: '记录',
            container: 'luckysheet', //luckysheet为容器id
            allowUpdate: true,
            loadUrl: "http://" + location.host + "/loadUrl",
            lang: 'zh', //中文
            showinfobar: false, //关闭最顶部的显示
            enableAddRow: false, //允许添加行
            enableAddBackTop: false, //允许回到顶部
            column: 20, //初始列
            row: 25, //初始行
            hook: {
                updated: function (e) {
                    //监听更新,并在3s后自动保存
                    if (autoSave) clearTimeout(autoSave)
                    $(luckysheet_info_detail_save).text("已修改")
                    autoSave = setTimeout(function () {
                        var excel = luckysheet.getAllSheets();
                        //去除临时数据,减小体积
                        for (var i in excel) excel[i].data = undefined
                        $.post("http://" + location.host + "/updateUrl", {jsonExcel: JSON.stringify(excel)},
                            function (data) {
                                $(luckysheet_info_detail_save).text("已保存");
                                if (data)
                                    console.log("完成保存");
                            });
                    }, 3 * 1000)
                    return true;
                }
            },
            updateUrl: "ws://" + location.hostname + "/" + userId,
            showtoolbarConfig: {
                image: false, //图片
                print: false, //打印
                screenshot: false, //截图
                link: false, //链接
                pivotTable: false, //数据透视表
                chart: false, //图表
            }
        }
        luckysheet.create(options)
    })

    /**
     * 查看源码
     */
    $("#code").click(function () {
        console.log(luckysheet.getluckysheetfile());
    });
</script>
</body>

</html>
